<template>
  <div class="app-box">
    <div class="fq-box">
      <div class="xm-title">
        <div class="title-sx">.</div><span>{{mockdata.bnfq.title}}</span>
      </div>
      <flexbox :gutter="0" style="padding:5px 0px; color:#B9B9B9;">
        <flexbox-item style="padding-left:18px;">
          <div class="flex-demo" v-bind:class="{checkedTab:ck1}" @click="changeCheckedCode('01')">医美<img v-show="checkedCode=='01'" style="width:6px;" src="../assets/checkedtab.png"></div>
        </flexbox-item>
        <flexbox-item>
          <div class="flex-demo" v-bind:class="{checkedTab:ck2}" @click="changeCheckedCode('02')">装修<img v-show="checkedCode=='02'" style="width:6px;" src="../assets/checkedtab.png"></div>
        </flexbox-item>
        <flexbox-item>
          <div class="flex-demo" v-bind:class="{checkedTab:ck3}" @click="changeCheckedCode('03')">二手车<img v-show="checkedCode=='03'" style="width:6px;" src="../assets/checkedtab.png"></div>
        </flexbox-item>
        <flexbox-item>
          <div class="flex-demo" v-bind:class="{checkedTab:ck4}" @click="changeCheckedCode('04')">租房<img v-show="checkedCode=='04'" style="width:6px;" src="../assets/checkedtab.png"></div>
        </flexbox-item>
        <flexbox-item>
          <div class="flex-demo" v-bind:class="{checkedTab:ck5}" @click="changeCheckedCode('05')">教育<img v-show="checkedCode=='05'" style="width:6px;" src="../assets/checkedtab.png"></div>
        </flexbox-item>
      </flexbox>
      <div class="fq-tab"></div>
      <div v-for="item in mockdata.bnfq.data" style="padding-bottom:20px;">
        <div><i class="i-title" v-bind:class="item.ysclass"><img style="width: 14px;vertical-align:  text-bottom;" src="../assets/fenqi.png"></i><span>{{item.title}}</span></div>
        <div class="jsys-box"><span>{{item.type1}}</span><span>{{item.type2}}</span><span>{{item.type3}}</span>
          <!-- <span class="jsys-cz" v-bind:class="item.ysclass">去分期</span> --></div>
        <div class="jelx-box jelx-title" style="height: 30px;">
          <div style="display:inline-block;width:50%;vertical-align: -webkit-baseline-middle;">{{item.jetitle}}</div>
          <div class="tr" style="display:inline-block;width:21%;vertical-align: -webkit-baseline-middle;">{{item.lxtitle}}</div>
          <div style="display:inline-block;width:23%;text-align: right;"><span class="jsys-cz" v-bind:class="item.ysclass">去分期</span></div>
        </div>
        <div class="jelx-box jelx-value" style="">
          <div style="display:inline-block;width:50%">{{item.jevalue}}</div>
          <div class="tr" style="display:inline-block;width:21%" v-bind:class="item.ysclass">{{item.lxvalue}}起</div>
          <div style="display:inline-block;width:23%;text-align: right;"></div>
        </div>
      </div>
    </div>
    <div class="fq-box">
      <div class="xm-title">
        <div class="title-sx" style="color:  #31CD82 ;background: #31CD82 ;">.</div><span>{{mockdata.bnhk.title}}</span>
      </div>
      <div class="fq-tab"></div>
      <div v-for="item in mockdata.bnhk.data" style="padding-bottom:20px;">
        <div class="ts-titld"><i class="i-title" v-bind:class="item.ysclass"><img style="width: 14px;vertical-align:  text-bottom;" src="../assets/haikuan.png"></i><span>{{item.title}}</span></div>
        <div class="jsys-box"><span>{{item.type1}}</span><span>{{item.type2}}</span><span>{{item.type3}}</span>
          <!-- <span class="jsys-cz" v-bind:class="item.ysclass">去分期</span> --></div>
        <div class="jelx-box jelx-title" style="height: 30px;">
          <div style="display:inline-block;width:50%;vertical-align: -webkit-baseline-middle;">{{item.jetitle}}</div>
          <div class="tr" style="display:inline-block;width:21%;vertical-align: -webkit-baseline-middle;">{{item.lxtitle}}</div>
          <div style="display:inline-block;width:23%;text-align: right;"><span class="jsys-cz" v-bind:class="item.ysclass">去还款</span></div>
        </div>
        <div class="jelx-box jelx-value" style="">
          <div style="display:inline-block;width:50%">{{item.jevalue}}</div>
          <div class="tr" style="display:inline-block;width:21%" v-bind:class="item.ysclass">{{item.lxvalue}}起</div>
          <div style="display:inline-block;width:23%;text-align: right;"></div>
        </div>
      </div>
    </div>
    <div class="fq-box">
      <div class="xm-title">
        <div class="title-sx" style="color:  #FE5A19 ;background: #FE5A19 ;">.</div><span>{{mockdata.bnjq.title}}</span>
      </div>
      <div class="fq-tab"></div>
      <div v-for="item in mockdata.bnjq.data" style="padding-bottom:20px;">
        <div class="ts-titld"><i class="i-title" v-bind:class="item.ysclass"><img style="width: 14px;vertical-align:  text-bottom;" src="../assets/jieqian.png"></i><span>{{item.title}}</span></div>
        <div class="jsys-box"><span>{{item.type1}}</span><span>{{item.type2}}</span><span>{{item.type3}}</span>
          <!-- <span class="jsys-cz" v-bind:class="item.ysclass">去分期</span> --></div>
        <div class="jelx-box jelx-title" style="height: 30px;">
          <div style="display:inline-block;width:50%;vertical-align: -webkit-baseline-middle;">{{item.jetitle}}</div>
          <div class="tr" style="display:inline-block;width:21%;vertical-align: -webkit-baseline-middle;">{{item.lxtitle}}</div>
          <div style="display:inline-block;width:23%;text-align: right;"><span class="jsys-cz" v-bind:class="item.ysclass">去还款</span></div>
        </div>
        <div class="jelx-box jelx-value" style="">
          <div style="display:inline-block;width:50%">{{item.jevalue}}</div>
          <div class="tr" style="display:inline-block;width:21%" v-bind:class="item.ysclass">{{item.lxvalue}}起</div>
          <div style="display:inline-block;width:23%;text-align: right;"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
let ymfqdata = [{
  title: '信美分期-深圳前海信美分期',
  type1: '易操作',
  type2: '高额度',
  type3: '技术领先',
  jetitle: '平均额度',
  lxtitle: '月利率',
  ysclass: 'xl',
  jevalue: '20000',
  lxvalue: '1.8%'
}]
let zxfqdata = [{
  title: '小窝金融-深圳市小窝金融信息有限公司',
  type1: '易操作',
  type2: '高额度',
  type3: 'vip顾问',
  jetitle: '平均额度',
  lxtitle: '月利率',
  ysclass: 'xl',
  jevalue: '20000',
  lxvalue: '0.57%'
}]
let escfqdata = [{
  title: '优信二手车-优估(上海)信息科技有限公司',
  type1: '审核快',
  type2: '低首付',
  type3: '优秀售后',
  jetitle: '平均额度',
  lxtitle: '月利率',
  ysclass: 'xl',
  jevalue: '250000',
  lxvalue: '0.52%'
}, {
  title: '车王融资租赁-车王(中国)融资租赁有限公司',
  type1: '低首付',
  type2: '高额度',
  type3: '门槛低',
  jetitle: '平均额度',
  lxtitle: '月利率',
  ysclass: 'xl',
  jevalue: '320000',
  lxvalue: '0.54%'
}, {
  title: '海通恒信国际租赁-恒信租赁有限公司',
  type1: '低首付',
  type2: '高额度',
  type3: '门槛低',
  jetitle: '平均额度',
  lxtitle: '月利率',
  ysclass: 'xl',
  jevalue: '230000',
  lxvalue: '0.52%'
}]
let zffqdata = [{
  title: '应花分期-上海前隆信息科技有限公司',
  type1: '审核快',
  type2: '易通过',
  type3: '门槛低',
  jetitle: '平均额度',
  lxtitle: '月利率',
  ysclass: 'xl',
  jevalue: '40000',
  lxvalue: '0.06%'
}]
let jyfqdata = [{
  title: '学习贷-华融消费金融',
  type1: '易操作',
  type2: '高额度',
  type3: '面向学生',
  jetitle: '平均额度',
  lxtitle: '月利率',
  ysclass: 'xl',
  jevalue: '40000',
  lxvalue: '0.06%'
}, {
  title: '任性付-苏宁消费金融',
  type1: '零首付',
  type2: '高额度',
  type3: '免息优惠',
  jetitle: '平均额度',
  lxtitle: '月利率',
  ysclass: 'xl',
  jevalue: '40000',
  lxvalue: '0.06%'
}, {
  title: '助学宝-兴业消费金融',
  type1: '银行',
  type2: '还款期数长',
  type3: '先息后本',
  jetitle: '平均额度',
  lxtitle: '月利率',
  ysclass: 'xl',
  jevalue: '40000',
  lxvalue: '0.06%'
}]
import { Flexbox, FlexboxItem } from 'vux'
export default {
  components: {
    Flexbox,
    FlexboxItem
  },
  data() {
    return {
      checkedCode: '01',
      mockdata: {
        bnfq: {
          title: '帮你分期',
          data: [{
            title: '信美分期-深圳前海信美分期',
            type1: '易操作',
            type2: '高额度',
            type3: '技术领先',
            jetitle: '平均额度',
            lxtitle: '月利率',
            ysclass: 'xl',
            jevalue: '20000',
            lxvalue: '1.8%'
          }]
        },
        bnhk: {
          title: '帮你还款',
          data: [{
            title: '卡易还-中银消费金融有限公司',
            type1: '门槛低',
            type2: '审批快',
            type3: '额度高',
            jetitle: '平均额度',
            lxtitle: '年利率',
            ysclass: 'xgree',
            jevalue: '6000',
            lxvalue: '12%'
          }, {
            title: '小通币咚-通联商务服务有限公司',
            type1: '门槛低',
            type2: '审批快',
            type3: '即时到账',
            jetitle: '平均额度',
            lxtitle: '年利率',
            ysclass: 'xgree',
            jevalue: '9000',
            lxvalue: '10%'
          }]
        },
        bnjq: {
          title: '帮你借钱',
          data: [{
            title: '新易贷-中银消费金融有限公司',
            type1: '门槛低',
            type2: '审批快',
            type3: '额度高',
            jetitle: '平均额度',
            lxtitle: '日利率',
            ysclass: 'xred',
            jevalue: '8000',
            lxvalue: '0.03%'
          }, {
            title: '融360',
            type1: '门槛低',
            type2: '审批快',
            type3: '额度高',
            jetitle: '平均额度',
            lxtitle: '日利率',
            ysclass: 'xred',
            jevalue: '9000',
            lxvalue: '0.03%'
          }, {
            title: '拍拍贷-上海拍拍贷金融信息服务有限公司',
            type1: '门槛低',
            type2: '审批快',
            type3: '额度高',
            jetitle: '平均额度',
            lxtitle: '日利率',
            ysclass: 'xred',
            jevalue: '6000',
            lxvalue: '0.027%'
          }]
        }
      }
    }
  },
  computed: {
    ck1: function() {
      return this.checkedCode == '01'
    },
    ck2: function() {
      return this.checkedCode == '02'
    },
    ck3: function() {
      return this.checkedCode == '03'
    },
    ck4: function() {
      return this.checkedCode == '04'
    },
    ck5: function() {
      return this.checkedCode == '05'
    },
  },
  methods: {
    changeCheckedCode(code) {
      this.checkedCode = code
      if (code == '01') {
        this.mockdata.bnfq.data = ymfqdata
      } else if (code == '02') {
        this.mockdata.bnfq.data = zxfqdata
      } else if (code == '03') {
        this.mockdata.bnfq.data = escfqdata
      } else if (code == '04') {
        this.mockdata.bnfq.data = zffqdata
      } else if (code == '05') {
        this.mockdata.bnfq.data = jyfqdata
      }

    }
  }
}

</script>
<style>
.tr {
  text-align: right;
}

.fq-box {
  background: #fff;
  padding: 0 10px;
  margin-bottom: 15px;
}

.xm-title {
  line-height: 20px;
  /* margin: 15px 0 5px 0;
*/
  font-weight: 600;
  font-size: 16px;
  padding: 6px 0;
}

.title-sx {
  width: 5px;
  height: 20px;
  display: inline-block;
  background: #468DF3;
  color: #468DF3;
  margin-right: 15px;
}

.ts-titld {
  font-size: 14px;
}

.lx-title {}

.jsys-box {
  font-size: 10px;
  color: #b7b0b0;
  position: static;
  margin-top: 2px;
}

.jsys-box,
.jelx-box {
  margin-left: 25px;
}


.jsys-box span {
  display: inline-block;
  margin-right: 15px;
  background: #ececec;
  border-radius: 12px;
  padding: 0px 2px;
  padding-top: 2px;
  line-height: 10px;
}

.jelx-box {
  color: #a7a7a7;
}

.jelx-value {
  font-size: 14px;
}

.xl {
  color: #468DF3;
}

.xgree {
  color: #31CD82;
}

.xred {
  color: #FE5A19;
}

.jelx-box span.xl {
  background: #e5e9f7;
}

.jelx-box span.xgree {
  background: #e5f7e7;
}

.jelx-box span.xred {
  background: #f7e7e5;
}

.jelx-box span.jsys-cz {
  right: 10px;
  font-size: 12px;
  padding: 2px 14px;
  margin-top: 8px;
  border-radius: 12px;
}



.i-title {
  margin-right: 5px;
}

.checkedTab {
  color: #468DF3;
}

</style>
